<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>布局系统</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >
    <meta name="generator" content="www.leipi.org" />
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <!--[if lte IE 6]>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-ie6.css">
    <![endif]-->
    <!--[if lte IE 7]>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/ie.css">
    <![endif]-->
    <link rel="stylesheet" href="leipi.style.css">
    <script type="text/javascript" src="../dialogs/internal.js"></script>
    <script type="text/javascript">
function createElement(type, name)
{     
    var element = null;     
    try {        
        element = document.createElement('<'+type+' name="'+name+'">');     
    } catch (e) {}   
    if(element==null) {     
        element = document.createElement(type);     
        element.name = name;     
    } 
    return element;     
}
    </script>
</head>
<body>
<div class="content">
    <table class="table table-bordered table-striped table-hover">
     <tr>
	<!--<th><span>行数</span><span class="label label-important">*</span></th> -->
        <th><span>栅格系数</span><span class="label label-important">*</span></th>
		<th><span>对齐方式</span> </th>
    </tr>
    <tr>
<!--        <td><input type="text" id="rows" placeholder="必填项"></td> -->
        <td><input type="text" id="cols" value="6 6" placeholder="必填项"></td>
		<td>
		    <select id="orgalign">
		        <option value="left" >左对齐</option>
		        <option value="center">居中对齐</option>
		        <option value="right">右对齐</option>
		    </select>
		</td>
    </tr>
    </table>
</div>
<script src="jquery-1.7.2.min.js"></script>
<script src="./bootstrap/js/bootstrap.js"></script>
<script type="text/javascript">
var oNode = null,thePlugins = 'insertlayout';
window.onload = function() {
    if( UE.plugins[thePlugins].editdom ){
        oNode = UE.plugins[thePlugins].editdom;
		var gValue = '';
		if(oNode.getAttribute('value'))
			gValue = oNode.getAttribute('value').replace(/&quot;/g,"\"");
			gAlign=oNode.getAttribute('orgalign'),
			gValue = gValue==null ? '' : gValue;
			$G('cols').value = gValue;
	        $G('orgalign').value = gAlign;
    }
}
dialog.oncancel = function () {
    if( UE.plugins[thePlugins].editdom ) {
        delete UE.plugins[thePlugins].editdom;
    }
};
dialog.onok = function (){
    if($G('cols').value == ''){
        alert('请输入栅格系数哦！');
        return false;
    }
	gValue = $G('cols').value.replace(/&quot;/g,"\"");
	gAlign=$G('orgalign').value;
    if( !oNode ) {
        try {
        	 var content = createTable(gValue,gAlign);
        	 editor.ready( function( edt ) {
				if(content != '') editor.execCommand('insertHtml', content); 
        	})	
        } catch (e) {
            try {
                editor.execCommand('error');
            } catch ( e ) {
                alert('控件异常，请反馈或寻求帮助！');
            }
            return false;
        }
    } else {
	 $G('cols').value = gValue;
	 $G('orgalign').value = gAlign;
     oNode.setAttribute('value', gValue);
     oNode.setAttribute('orgalign', gAlign);
	 
     delete UE.plugins[thePlugins].editdom;
    }
};
//插入表格
function createTable(cols,gAlign) {
				var grids = cols.replace(/(^\s+)|(\s+$)/g,'').split(' '),
					html = [],
					sum = 0;
					// tdWidth = Math.floor(100/(grids.length)) +'%';
				//bootstrap布局
				// grids.forEach((item,index) => {
				// 	html.push('<div class="col-md-'+item+'" style="text-align:'+gAlign+'" style="border:1px solid red;height:100%;">'+index+'</div>');
				// })
				// return '<div class="container" ><div class="row" style="background:yellow;">' + html.join('') + '</div></div>'
				//div布局
				if(/(\s+)/g.test(cols)){
					// grids.forEach((item,index) => {
					// 		sum += Number(item);
					// })
					for(var i = 0; i < grids.length; i++){
						sum += Number(grids[i])
					}
					if(sum != 12){
						alert('注意:布局系统一共只有12列哦,请正确分布您的布局！');
						return false;
					}
					// grids.forEach((item,index) => {
					// 	var liWidth = Math.round(item/12 * 100)+'%';
					// 	html.push('<div class="contBox" leipiplugins="insertlayout" style="box-sizing:border-box;border:1px solid #ccc;width:'+liWidth+';height:auto !important;min-height:50px;height:50px;padding-top:12.5px;word-wrap:break-word;text-align:'+gAlign+';"></div>');
					// })
					for(var j = 0; j < grids.length; j++){
						var liWidth = Math.round(grids[j]/12 * 100) + '%';
						html.push('<div class="contBox" leipiplugins="insertlayout" style="box-sizing:border-box;border:1px solid #ccc;width:'+liWidth+';height:auto !important;min-height:50px;height:50px;padding-top:12.5px;word-wrap:break-word;text-align:'+gAlign+';float:left;"></div>');
					}
				}else{
					alert('数字之间用空格分开哦！')
				}
				return '<div style="display:flex;">'+html.join('')+'</div>'
				//table布局
     //            var html = [];
	    //         //todo其他属性
	    //         var tdWidth = Math.floor(100/cols) +'%';
     //            for (var r = 0; r < rows; r++) {
     //                html.push('<ul' + (r == 0 ? ' class="firstRow"':'') + '>');
     //                for (var c = 0; c < cols; c++) {
					// 	html.push('<li width="'+tdWidth+'" style="text-align:'+gAlign+';">c</li>');
     //                }
     //                html.push('</ul>')
     //            }
     //            //禁止指定table-width
     //            // return '<table style="width:100%;"><tbody>' + html.join('') + '</tbody></table>'
				 // return   html.join('')
            }
</script>
</body>
</html>